<script setup>
import { ref, onMounted, defineProps, toRefs, watch } from "vue";
import { getQuestionListApi, getQuestionDetailsApi } from "@/request/api";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();

const list = ref([]);
const field_question = ref("question");
const field_answer = ref("answer");
const lang = ref(locale.value);
const askingId = ref("");
const details = ref({});
const feeVisible = ref(false);
const tdData = [
  { amount: "1000元以下的部分", fee: "100元" },
  { amount: "1001元至50000元的部分", fee: "按5%交纳" },
  { amount: "50001元至100000元的部分", fee: "按4%交纳" },
  { amount: "100001元至200000元的部分", fee: "按3%交纳" },
  { amount: "200001元至500000元的部分", fee: "按2%交纳" },
  { amount: "500001元至1000000元的部分", fee: "按1%交纳" },
  { amount: "1000001元以上的部分", fee: "按0.5%交纳" },
];
const tdDataEn = [
  { amount: "1,000 or less", fee: "100" },
  { amount: "1,001 to 50,000", fee: "100 plus 5% of the amount above 1,000" },
  {
    amount: "50,001 to 100,000",
    fee: "2,550 plus 4% of the amount above 50,000",
  },
  {
    amount: "100,001 to 200,000",
    fee: "4,550 plus 3% of the amount above 100,000",
  },
  {
    amount: "200,001 to 500,000",
    fee: "7,550 plus 2% of the amount above 200,000",
  },
  {
    amount: "500,001 to 1,000,000",
    fee: "13,550 plus 1% of the amount above 500,000",
  },
  {
    amount: "1,000,001 or more",
    fee: "18,550 plus 0.5% of the amount above 1,000,000",
  },
];

onMounted(async () => {
  initData();
});

watch(
  () => locale.value,
  (val, oldVal) => {
    if (val === "en") {
      field_question.value = "questionEn";
      field_answer.value = "answerEn";
      lang.value = "en";
    } else {
      field_question.value = "question";
      field_answer.value = "answer";
      lang.value = "zh";
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const initData = () => {
  const data = {
    keyWord: "",
    page: 1,
    size: 100,
    type: "4",
  };
  getQuestionListApi(data).then((res) => {
    if (res && (res.code === 0 || res.result === "200")) {
      list.value = res.data.records;
    }
  });
};
const handleClick = (id) => {
  askingId.value = id;
  const data = { esId: id, req: "hand" };
  getQuestionDetailsApi(data).then((res) => {
    if (res && (res.code === 0 || res.result === "200")) {
      details.value = res.data;
      if (res.data.question === "广州仲裁委员会的仲裁收费办法") {
        feeVisible.value = true;
      }
    }
  });
};
const goList = () => {
  details.value = {};
  askingId.value = "";
  feeVisible.value = false;
};
</script>

<template>
  <div class="askingDisplay">
    <div class="outBox">
      <div v-if="!askingId" class="cntList">
        <div v-if="Array.isArray(list) && list.length > 0" class="cntList">
          <div
            class="listItem"
            v-for="item in list"
            :key="item.id"
            @click="handleClick(item.id)"
          >
            <div class="text text_line_2">{{ item[field_question] }}</div>
            <van-icon class="icon" name="arrow" />
          </div>
        </div>
      </div>
      <div v-else class="cntDetails">
        <div class="detailsTitle">
          <el-icon class="left" @click="goList"><Back /></el-icon>
          <div class="text"></div>
          <div class="right"></div>
        </div>
        <div class="detailsCnt">
          <div class="title" v-text="details[field_question]"></div>
          <div class="answer" v-html="details[field_answer]"></div>
          <template v-if="feeVisible">
            <div v-if="lang === 'en'" class="table">
              <table>
                <caption>
                  Charge Standards
                </caption>
                <tr>
                  <th>Amount in Dispute<br />(in RMB)</th>
                  <th>Registration Fee<br />(in RMB)</th>
                </tr>
                <tr v-for="(item, index) in tdDataEn" :key="index">
                  <td>{{ item.amount }}</td>
                  <td>{{ item.fee }}</td>
                </tr>
              </table>
            </div>
            <div v-else class="table">
              <table>
                <caption>
                  收费标准
                </caption>
                <tr>
                  <th>收费项目争议金额<br />(人民币)</th>
                  <th>仲裁案件受理费<br />(人民币)</th>
                </tr>
                <tr v-for="(item, index) in tdData" :key="index">
                  <td>{{ item.amount }}</td>
                  <td>{{ item.fee }}</td>
                </tr>
              </table>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.askingDisplay {
  color: #fff;
  display: flex;
  align-items: center;
  .outBox {
    width: 460px;
    height: 640px;
    padding: 26px 16px 16px 16px;
    // margin: auto;
    background: url("/public/img/exhibition-bg.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    position: relative;
    .cntList {
      height: 100%;
      overflow: auto;
      background: #0378de;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 5px;
      .listItem {
        width: 100%;
        font-size: 16px;
        color: #fff;
        background: linear-gradient(0deg, #3687c8 0%, #52aff5 100%);
        border: 1px solid #fff;
        border-radius: 5px;
        margin-bottom: 14px;
        padding: 6px 8px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        cursor: pointer;
      }
    }
    .cntDetails {
      height: 100%;
      background: #0378de;
      padding: 10px 20px;
      box-sizing: border-box;
      border-radius: 5px;
      .detailsTitle {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          font-size: 40px;
          color: #fff;
          cursor: pointer;
        }
        .text {
          font-size: 18px;
        }
        .right {
          width: 40px;
        }
      }
      .detailsCnt {
        height: calc(640px - 60px);
        overflow: auto;
        .title {
          font-size: 20px;
          font-weight: 600;
          text-align: center;
          color: #fff;
          margin-bottom: 20px;
        }
        .answer {
          font-size: 16px;
          color: #fff;
          white-space: pre-wrap;
          text-indent: 2em;
          text-align: justify;
          text-align-last: left;
        }
        .table {
          table {
            width: 100%;
            border-collapse: collapse;
            color: #fff;
          }

          table caption {
            font-size: 18px;
            font-weight: bold;
            margin: 10px;
          }

          th,
          td {
            border: 1px solid #ddd;
            text-align: center;
            padding: 6px 0;
          }
          th {
            font-size: 16px;
            font-weight: 600;
          }
          td {
            font-size: 16px;
          }

          table thead tr {
            background-color: #008c8c;
            color: #fff;
          }

          table tbody tr:nth-child(odd) {
            background-color: #eee;
          }

          table tbody tr:hover {
            background-color: #ccc;
          }

          table tbody tr td:first-child {
            color: #f40;
          }

          table tfoot tr td {
            text-align: right;
            padding-right: 20px;
          }
        }
      }
    }
    svg {
      font-size: unset;
    }
    // 美化滚动条
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    ::-webkit-scrollbar-track {
      width: 6px;
      background: #0378de;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #0289ce;
      background-clip: padding-box;
      min-height: 28px;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
      transition: background-color 0.3s;
      cursor: pointer;
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: #041c90;
    }
  }
}
</style>
